<template>
  <div class="flex items-center basic-tips">
    <div class="mr-1 label-name">{{ name }}</div>
    <el-tooltip
      :content="content"
      :effect="effect"
      raw-content
      :placement="placement"
      :trigger="trigger"
      popper-class="custom-tooltip"
    >
      <slot name="icon">
        <basic-icon
          :size="size"
          :name="icon"
          class="cursor-pointer"
          :class="[
            hoverIcon ? 'hover:text-primary' : '',
            color ? color : 'text-[#888]'
          ]"
        ></basic-icon>
      </slot>
      <template #content>
        <slot></slot>
      </template>
    </el-tooltip>
  </div>
</template>

<script setup lang="ts">
import BasicIcon from '@/components/application/src/BasicIcon.vue'
interface IProps {
  name: any
  content?: string
  icon?: string
  effect?: string
  size?: string
  color?: string
  hoverIcon?: boolean
  trigger?: 'click' | 'hover'
  placement?:
    | 'top'
    | 'top-start'
    | 'top-end'
    | 'right'
    | 'right-start'
    | 'right-end'
    | 'bottom'
    | 'bottom-start'
    | 'bottom-end'
    | 'left'
    | 'left-start'
    | 'left-end'
}

withDefaults(defineProps<IProps>(), {
  placement: 'right',
  icon: 'help-circle',
  effect: 'dark',
  trigger: 'hover',
  size: '16px'
})
</script>

<style lang="scss">
.custom-tooltip.is-dark {
  /* Set padding to ensure the height is 32px */
  color: #fff;
  min-width: auto;
  font-size: 12px;
  word-break: break-all;
  padding: 4px 8px !important;
  background-color: #666 !important;
  border: none !important;

  .el-popper__arrow::before {
    background: #666 !important;
    border-color: #666;
    top: -1px;
    border-bottom-color: transparent !important;
    border-right-color: transparent !important;

    // left: 4px;
  }
}

// .icon_hover:hover {
//   @apply text-primary;
// }
</style>
